.transactionPage {
  .inputLabel {
    padding-bottom: 5px;
  }

  .totalPrice {
    text-align: center;
    margin: 1rem auto 0;
    font-size: 16px;
    color: $gray;
  }

  @media screen and (max-width: $mobile) {
    .feeAmount {
      display: block;
    }
  }

  .tokenListContainer {
    height: 100%;
    max-height: 60vh;
    overflow: auto;

    @media (max-width: $mobile) {
      max-height: 55vh;
    }

    &::-webkit-scrollbar {
      width: 10px;
      background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: $borderRadius;
      cursor: pointer;
    }

    &::-webkit-scrollbar-track {
      background-color: transparent;
      border-radius: $borderRadius;
    }

    .tokenItem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 60px;
      padding: 0 20px;
      border-bottom: 1px solid;
      cursor: pointer;
      transition: background-color $transition1;
      &.disabled {
        cursor: default;
      }
      &:not(.disabled):hover {
        background-color: transparentize($color: $gray, $amount: 0.9);
      }

      .tokenSymbol {
        font-size: 22px;
      }

      .rightSide {
        display: flex;
        flex-direction: column;
        text-align: right;

        .balance {
          font-size: 18px;
        }
      }
    }
  }

  .nothingFound {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 10vh;
    overflow: hidden;
    text-align: center;
  }
}

body.inkline {
  &.-light {
    .transactionPage {
      .tokenListContainer {
        &::-webkit-scrollbar-thumb {
          background-color: $input-border-color-focus-light;
        }

        .tokenItem {
          border-color: $input-border-color-light;
        }
      }
    }
  }

  &.-dark {
    .transactionPage .tokenListContainer {
      &::-webkit-scrollbar-thumb {
        background-color: $input-border-color-focus-dark;
      }

      .tokenItem {
        border-color: $input-border-color-dark;
      }
    }
  }
}
